<template>
  <view class="dropdowncontainer flex-col justify-between " v-if="show">
    <view class="contain">
      <view v-for="(item, index) in showList" :key="index" :class="['item-style', { 'item-style-active': checkSelect.name === item.name }]" @click="handleselect({name:item.name,index:index})">
        {{ item.name }}
      </view>
    </view>

    <view @click="handleClosed" class="close-btn flex gap-1">
      {{$t('common.close')}}
      <u-icon name="arrow-up" color="#ffffff"></u-icon>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    showList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      checkSelect: ''
    };
  },
  methods: {
    handleselect(item) {
      this.checkSelect = item;
      this.$emit('checkSelect', this.checkSelect);
      this.$emit('closed', false);
      this.checkSelect = ''
    },
    handleClosed() {
      this.$emit('closed', false);
      this.checkSelect = ''
    }
  }
};
</script>
<style lang="scss" scoped>
.dropdowncontainer {
  width: 100%;
  height: 100%;
  transition: 0.3s; // 过渡动画
  padding: 20rpx 10rpx !important;
  background-color: #140c2b;
  position: absolute;
  height: 30vh;
  top: 6.7rem;
  margin-left: 20rpx;
      color: #ffffffb3;
  .contain {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    height: 90%;
    overflow-y: auto;
  }
  .item-style {
    padding: 0.25rem 0.25rem;
    background-color: #ffffff33;

    border-radius: 0.81rem;
    height: 1.5rem;
  }
  .item-style-active {
    background-image: linear-gradient(114.4deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
    color: #ffffff;
  }
  .close-btn {
    color: #ffffff;
    margin-left: auto;
      margin-right: auto;
  }
}
</style>
